<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>首页</title>
		<link rel="shortcut icon" type="image/x-icon" href="../../yjzh-img/main/logo.ico" media="screen" />
		<link rel="stylesheet" type="text/css" href="../../yjzh-plugins/font-awesome-4.7.0/css/font-awesome.min.css" />
		<link rel="stylesheet" type="text/css" href="../../yjzh-plugins/time-shaftr/css/history.css" />
		<link rel="stylesheet" type="text/css" href="../../yjzh-css/main.css" />
		<link rel="stylesheet" type="text/css" href="../../yjzh-css/all-page.css" />
		<link rel="stylesheet" type="text/css" href="../../yjzh-css/index.css" />
	</head>

	<body>
		<!--最外层盒子-->
		<div class="max-box">
			<!--头部盒子外层开始-->
			<div class="top-box clear">
				<img class="logo-icon" src="../../yjzh-img/main/logo-icon.png" />
				<span class="logo-title">应急指挥调度平台</span>
				<img class="logo-leaf" src="../../yjzh-img/main/top-leaf.png" />
				<ul class="user-list">
					<li>
						<a><i class="fa fa-power-off color-dark-blue font-size-16px" aria-hidden="true"></i><span class="color-dark-blue">&nbsp;&nbsp;退出</span></a>
					</li>
					<li>
						<a><i class="fa fa-user color-dark-blue font-size-16px" aria-hidden="true"></i><span class="color-dark-blue">&nbsp;&nbsp;您好，用户名</span></a>
					</li>
				</ul>
			</div>
			<!--头部盒子外层结束-->

			<!--左侧菜单外层盒子开始-->
			<div class="left-box">
				<!--左侧菜单内层盒子开始-->
				<div class="left-inner-box bg-black-blue">
					<!--收起菜单按钮样式开始-->
					<div class="pack-up-box">
						<i class="fa fa-bars color-white font-size-18px" aria-hidden="true"></i>&nbsp;&nbsp;<span class="color-white">收起菜单</span>
					</div>
					<!--收起菜单按钮样式结束-->
					<!--一级菜单开始-->
					<ul class="left-level1-list">
						<li class="checked-level1">
							<a class="checked-level1-cell"><i class="fa fa-newspaper-o font-size-18px" aria-hidden="true"></i>&nbsp;&nbsp;<span>我是菜单一</span></a>
							<!--二级菜单开始-->
							<ul class="left-level2-list">
								<li class="checked-level2">
									<a><i class="fa fa-newspaper-o font-size-18px" aria-hidden="true"></i>&nbsp;&nbsp;<span>我是菜单二</span></a>
								</li>
								<li>
									<a><i class="fa fa-newspaper-o font-size-18px" aria-hidden="true"></i>&nbsp;&nbsp;<span>我是菜单二</span></a>
								</li>
								<li>
									<a><i class="fa fa-newspaper-o font-size-18px" aria-hidden="true"></i>&nbsp;&nbsp;<span>我是菜单二</span></a>
								</li>
								<li>
									<a><i class="fa fa-newspaper-o font-size-18px" aria-hidden="true"></i>&nbsp;&nbsp;<span>我是菜单二</span></a>
								</li>
							</ul>
							<!--二级菜单结束-->
						</li>
						<li>
							<a class="checked-level1-cell"><i class="fa fa-newspaper-o font-size-18px" aria-hidden="true"></i>&nbsp;&nbsp;<span>我是菜单一</span></a>
							<!--二级菜单开始-->
							<ul class="left-level2-list">
								<li>
									<a><i class="fa fa-newspaper-o font-size-18px" aria-hidden="true"></i>&nbsp;&nbsp;<span>我是菜单二</span></a>
								</li>
								<li>
									<a><i class="fa fa-newspaper-o font-size-18px" aria-hidden="true"></i>&nbsp;&nbsp;<span>我是菜单二</span></a>
								</li>
								<li>
									<a><i class="fa fa-newspaper-o font-size-18px" aria-hidden="true"></i>&nbsp;&nbsp;<span>我是菜单二</span></a>
								</li>
								<li>
									<a><i class="fa fa-newspaper-o font-size-18px" aria-hidden="true"></i>&nbsp;&nbsp;<span>我是菜单二</span></a>
								</li>
							</ul>
							<!--二级菜单结束-->
						</li>
						<li>
							<a class="checked-level1-cell"><i class="fa fa-newspaper-o font-size-18px" aria-hidden="true"></i>&nbsp;&nbsp;<span>我是菜单一</span></a>
						</li>
						<li>
							<a class="checked-level1-cell"><i class="fa fa-newspaper-o font-size-18px" aria-hidden="true"></i>&nbsp;&nbsp;<span>我是菜单一</span></a>
						</li>
						<li>
							<a class="checked-level1-cell"><i class="fa fa-newspaper-o font-size-18px" aria-hidden="true"></i>&nbsp;&nbsp;<span>我是菜单一</span></a>
						</li>
					</ul>
					<!--一级菜单结束-->
				</div>
				<!--左侧菜单内层盒子结束-->
			</div>
			<!--左侧菜单外层盒子结束-->

			<!--右侧内容外层盒子开始-->
			<div class="right-box">
				<!--右侧内容内层盒子开始-->
				<div class="right-inner-box">
					<!--面包屑开始-->
					<div class="top-nav-box">
						<div class="nav-title">
							<a class="color-black-gray">首页</a><span>&nbsp;>&nbsp;</span>
							<a class="color-black-gray">多媒体报警</a><span>&nbsp;>&nbsp;</span>
							<a class="color-dark-blue">多屏指挥</a>
						</div>
						<div class="right-time"></div>
					</div>
					<!--面包屑结束-->
					<!--主要内容外层盒子开始-->
					<div class="content-box">
						<!--主要内容内层盒子开始-->
						<div class="content-inner-box">
							<!--视频页面外层盒子开始-->
							<div class="left-video-box">
								<div class="left-video-inner-box">
									<div id="arrow">
										<ul>
											<li class="arrowup"></li>
											<li class="arrowdown"></li>
										</ul>
									</div>
									<div id="history">
										<div class="title">
											<h3>网站成长史</h3>
											<div id="circle">
												<div class="cmsk"></div>
												<div class="circlecontent">
													<div thisyear="2013" class="timeblock">
														<span class="numf"></span>
														<span class="nums"></span>
														<span class="numt"></span>
														<span class="numfo"></span>
														<div class="clear2"></div>
													</div>
													<div class="timeyear">YEAR</div>
												</div>
												<a href="#" class="clock"></a>
											</div>
										</div>

										<div id="content">
											<ul class="list">
												<li style="margin-top:-110px;">
													<div class="liwrap">
														<div class="lileft">
															<div class="date">
																<span class="year">2018-01-20</span>
																<span class="md">10:32:25</span>
															</div>
														</div>
														<div class="point"><b></b></div>
														<div class="liright">
															<div class="histt">
																<a href="#">HTML5 CSS3 发展历程 发布</a>
															</div>
															<!--<div class="hisct">修正了上一版本中的错误，欢迎大家测试，如果发现问题请联系我们,谢谢。</div>-->
														</div>
													</div>
												</li>

												<li>
													<div class="liwrap">
														<div class="lileft">
															<div class="date">
																<span class="year">2018-01-20</span>
																<span class="md">10:32:25</span>
															</div>
														</div>
														<div class="point"><b></b></div>
														<div class="liright">
															<div class="histt">
																<a href="#">HTML5 CSS3 发展历程 发布</a>
															</div>
															<!--<div class="hisct">随着用户的访问量增大,功能不能满足需求，我们进行了重大更新，对设计和功能都进行大幅度的升级,增加了原创，欣赏版块</div>-->
														</div>
													</div>
												</li>

												<li>
													<div class="liwrap">
														<div class="lileft">
															<div class="date">
																<span class="year">2018-01-20</span>
																<span class="md">10:32:25</span>
															</div>
														</div>
														<div class="point"><b></b></div>
														<div class="liright">
															<div class="histt">
																<a href="#">官方微博</a>
															</div>
															<!--<div class="hisct">推出了HTML5 CSS3 官方微博</div>-->
														</div>
													</div>
												</li>

												<li>
													<div class="liwrap">
														<div class="lileft">
															<div class="date">
																<span class="year">2018-01-20</span>
																<span class="md">10:32:25</span>
															</div>
														</div>
														<div class="point"><b></b></div>
														<div class="liright">
															<div class="histt">
																<a href="#">HTML5 CSS3 发展历程 上线</a>
															</div>
															<!--<div class="hisct">虽然功能还未健全，但是我们已迫不及待的让它去接受广大用户的火眼金睛</div>-->
														</div>
													</div>
												</li>
												<li>
													<div class="liwrap">
														<div class="lileft">
															<div class="date">
																<span class="year">2018-01-20</span>
																<span class="md">10:32:25</span>
															</div>
														</div>
														<div class="point"><b></b></div>

														<div class="liright">
															<div class="histt">
																<a href="#">初期讨论</a>
															</div>
															<!--<div class="hisct">在集体探讨下，发现目前的HTML5 CSS3 发展历程已经不能满足需求，集体讨论=，这时候，韩老师之前的设计稿被端上了会议桌。</div>-->
														</div>
													</div>
												</li>
												<li>
													<div class="liwrap">
														<div class="lileft">
															<div class="date">
																<span class="year">2018-01-20</span>
																<span class="md">10:32:25</span>
															</div>
														</div>
														<div class="point"><b></b></div>

														<div class="liright">
															<div class="histt">
																<a href="#">初期讨论</a>
															</div>
															<!--<div class="hisct">在集体探讨下，发现目前的HTML5 CSS3 发展历程已经不能满足需求，集体讨论=，这时候，韩老师之前的设计稿被端上了会议桌。</div>-->
														</div>
													</div>
												</li>
												<li>
													<div class="liwrap">
														<div class="lileft">
															<div class="date">
																<span class="year">2018-01-20</span>
																<span class="md">10:32:25</span>
															</div>
														</div>
														<div class="point"><b></b></div>

														<div class="liright">
															<div class="histt">
																<a href="#">初期讨论</a>
															</div>
															<!--<div class="hisct">在集体探讨下，发现目前的HTML5 CSS3 发展历程已经不能满足需求，集体讨论=，这时候，韩老师之前的设计稿被端上了会议桌。</div>-->
														</div>
													</div>
												</li>
												<li>
													<div class="liwrap">
														<div class="lileft">
															<div class="date">
																<span class="year">2018-01-20</span>
																<span class="md">10:32:25</span>
															</div>
														</div>
														<div class="point"><b></b></div>

														<div class="liright">
															<div class="histt">
																<a href="#">初期讨论</a>
															</div>
															<!--<div class="hisct">在集体探讨下，发现目前的HTML5 CSS3 发展历程已经不能满足需求，集体讨论=，这时候，韩老师之前的设计稿被端上了会议桌。</div>-->
														</div>
													</div>
												</li>
												<li>
													<div class="liwrap">
														<div class="lileft">
															<div class="date">
																<span class="year">2018-01-20</span>
																<span class="md">10:32:25</span>
															</div>
														</div>
														<div class="point"><b></b></div>

														<div class="liright">
															<div class="histt">
																<a href="#">初期讨论</a>
															</div>
															<!--<div class="hisct">在集体探讨下，发现目前的HTML5 CSS3 发展历程已经不能满足需求，集体讨论=，这时候，韩老师之前的设计稿被端上了会议桌。</div>-->
														</div>
													</div>
												</li>
												<li>
													<div class="liwrap">
														<div class="lileft">
															<div class="date">
																<span class="year">2018-01-20</span>
																<span class="md">10:32:25</span>
															</div>
														</div>
														<div class="point"><b></b></div>
														<div class="liright">
															<div class="histt">
																<a href="#">灵感迸发</a>
															</div>
															<!--<div class="hisct">某天晚上的凌晨三点一刻，预想建立这样一个功能的网站，专为网页设计师。</div>-->
														</div>
													</div>
												</li>
												<li>
													<div class="liwrap">
														<div class="lileft">
															<div class="date">
																<span class="year">2018-01-20</span>
																<span class="md">10:32:25</span>
															</div>
														</div>
														<div class="point"><b></b></div>
														<div class="liright">
															<div class="histt">
																<a href="#">HTML5 CSS3 发展历程 上线</a>
															</div>
															<!--<div class="hisct">虽然功能还未健全，但是我们已迫不及待的让它去接受广大用户的火眼金睛</div>-->
														</div>
													</div>
												</li>
												<li>
													<div class="liwrap">
														<div class="lileft">
															<div class="date">
																<span class="year">2018-01-20</span>
																<span class="md">10:32:25</span>
															</div>
														</div>
														<div class="point"><b></b></div>
														<div class="liright">
															<div class="histt">
																<a href="#">初见成效初见成效初见成效</a>
															</div>
															<!--<div class="hisct">代码笔记第一版上线</div>-->
														</div>
													</div>
												</li>
											</ul>
										</div>
									</div>
								</div>
							</div>
							<div class="right-video-box">
								<div class="video-max-box">
									<!--tab标签开始-->
									<ul class="tab-list clear">
										<li class="checked-tab"><abbr title="案件一">案件一</abbr></li>
									</ul>
									<!--tab标签结束-->
									<!--分块标题开始-->
									<div class="part-title-box">
										<div class="part-title">
											现场视频
										</div>
										<ul class="more-screen-box">
											<li style="cursor:pointer;">
												<i class="fa fa-commenting color-green font-size-22px" aria-hidden="true"></i>&nbsp;<span class="color-green font-size-16px">事件详情查看</span>
											</li>
											<li style="cursor:pointer;">
												<i class="fa fa-map-marker color-dark-blue font-size-22px" aria-hidden="true"></i>&nbsp;<span class="color-dark-blue font-size-16px">地图位置查看</span>
											</li>
										</ul>
									</div>
									<!--分块标题开始-->
									<!--tab标签内容外层开始-->
									<div class="tab-content-box">
										<!--tab标签内容内层开始-->
										<div class="tab-content-inner-box">
											<!--tab分页1开始-->
											<div class="tab-num-box clear">
												<!--视频1开始-->
												<div class="video-box local-video-box">
													<div class="video-title">
														本地视频
													</div>
													<div class="video-content-box bg-gray">
														<div class="address-box">
															<i class="fa fa-map-marker color-white" aria-hidden="true"></i> &nbsp;&nbsp;
															<span class="color-white">石家庄市桥西区</span>
														</div>
														<div class="public-box">
															<img src="../../yjzh-img/other/stop-public.png" />
															<button class="button1 color-dark-blue border-dark-blue public-video-button">立即发布</button>
														</div>
														<video hidden="hidden">
															<source src="../../yjzh-img/other/mov_bbb.mp4" type="video/mp4"></source>
															当前浏览器不支持 video直接播放，点击这里下载视频：
															<a href="myvideo.webm">下载视频</a>
														</video>
														<div class="controls-box">
															<span class="stop-public-btn">停止<br />发布</span>
															<span class="voice-btn"></span>
															<ul class="video-content-list">
																<li><span class="full-screen-btn"></span></li>
																<li><span class="video-stop-btn vido-star-btn"></span></li>
																<li><span class="color-white font-size-12px">640*480</span></li>
																<li><span class="color-white font-size-12px">134kbits/sec</span></li>
															</ul>
														</div>
													</div>
												</div>
												<!--视频1结束-->
												<!--视频2开始-->
												<div class="video-box">
													<div class="video-title color-blue" title="李警官 桥西区维明派出所支队长桥西区维明派出所支队长">
														李警官
													</div>
													<div class="video-content-box">
														<div class="address-box">
															<i class="fa fa-map-marker color-white" aria-hidden="true"></i> &nbsp;&nbsp;
															<span class="color-white">石家庄市桥西区</span>
														</div>
														<video>
															<source src="../../yjzh-img/other/mov_bbb.mp4" type="video/mp4"></source>
															当前浏览器不支持 video直接播放，点击这里下载视频：
															<a href="myvideo.webm">下载视频</a>
														</video>
														<div class="controls-box">
															<span class="voice-btn"></span>
															<ul class="video-content-list">
																<li><span class="full-screen-btn"></span></li>
																<li><span class="video-stop-btn"></span></li>
																<li><span class="color-white font-size-12px">640*480</span></li>
																<li><span class="color-white font-size-12px">134kbits/sec</span></li>
															</ul>
														</div>
													</div>
												</div>
												<!--视频2结束-->
												<div class="video-box">
													<div class="video-title color-blue" title="李警官 桥西区维明派出所支队长桥西区维明派出所支队长">
														李警官
													</div>
													<div class="video-content-box">
														<div class="address-box">
															<i class="fa fa-map-marker color-white" aria-hidden="true"></i> &nbsp;&nbsp;
															<span class="color-white">石家庄市桥西区</span>
														</div>
														<video>
															<source src="../../yjzh-img/other/mov_bbb.mp4" type="video/mp4"></source>
															当前浏览器不支持 video直接播放，点击这里下载视频：
															<a href="myvideo.webm">下载视频</a>
														</video>
														<div class="controls-box">
															<span class="voice-btn"></span>
															<ul class="video-content-list">
																<li><span class="full-screen-btn"></span></li>
																<li><span class="video-stop-btn"></span></li>
																<li><span class="color-white font-size-12px">640*480</span></li>
																<li><span class="color-white font-size-12px">134kbits/sec</span></li>
															</ul>
														</div>
													</div>
												</div>
												<div class="video-box">
													<div class="video-title color-blue" title="李警官 桥西区维明派出所支队长桥西区维明派出所支队长">
														李警官
													</div>
													<div class="video-content-box">
														<div class="address-box">
															<i class="fa fa-map-marker color-white" aria-hidden="true"></i> &nbsp;&nbsp;
															<span class="color-white">石家庄市桥西区</span>
														</div>
														<video>
															<source src="../../yjzh-img/other/mov_bbb.mp4" type="video/mp4"></source>
															当前浏览器不支持 video直接播放，点击这里下载视频：
															<a href="myvideo.webm">下载视频</a>
														</video>
														<div class="controls-box">
															<span class="voice-btn"></span>
															<ul class="video-content-list">
																<li><span class="full-screen-btn"></span></li>
																<li><span class="video-stop-btn"></span></li>
																<li><span class="color-white font-size-12px">640*480</span></li>
																<li><span class="color-white font-size-12px">134kbits/sec</span></li>
															</ul>
														</div>
													</div>
												</div>
												<div class="video-box">
													<div class="video-title color-blue" title="李警官 桥西区维明派出所支队长桥西区维明派出所支队长">
														李警官
													</div>
													<div class="video-content-box">
														<div class="address-box">
															<i class="fa fa-map-marker color-white" aria-hidden="true"></i> &nbsp;&nbsp;
															<span class="color-white">石家庄市桥西区</span>
														</div>
														<video>
															<source src="../../yjzh-img/other/mov_bbb.mp4" type="video/mp4"></source>
															当前浏览器不支持 video直接播放，点击这里下载视频：
															<a href="myvideo.webm">下载视频</a>
														</video>
														<div class="controls-box">
															<span class="voice-btn"></span>
															<ul class="video-content-list">
																<li><span class="full-screen-btn"></span></li>
																<li><span class="video-stop-btn"></span></li>
																<li><span class="color-white font-size-12px">640*480</span></li>
																<li><span class="color-white font-size-12px">134kbits/sec</span></li>
															</ul>
														</div>
													</div>
												</div>
												<!--tab分页1结束-->
											</div>

											<!--tab标签内容内层开始-->
										</div>
										<!--tab标签内容外层结束-->
									</div>
									<!--视频页面外层盒子结束-->
								</div>
							</div>
							<!--主要内容内层盒子结束-->
						</div>
						<!--主要内容外层盒子结束-->
					</div>
					<!--右侧内容内层盒子结束-->
				</div>
				<!--右侧内容外层盒子结束-->
			</div>
	</body>
	<script src="../../yjzh-plugins/js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../yjzh-plugins/time-shaftr/js/history.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../yjzh-plugins/time-shaftr/js/jquery.easing.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../yjzh-plugins/time-shaftr/js/jquery.mousewheel.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../yjzh-js/index.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		for(var i = 0; i < $(".tab-list li").length; i++) {
			$(".tab-list li").eq(i).css("z-index", 300 - i);
		}

		//		$(".tab-list").on("click", "li", function() {
		//			$(".tab-list li").removeClass("checked-tab");
		//			$(this).addClass("checked-tab");
		//			var tabIndex = $(this).index();
		//			$(".tab-num-box").css("display", "none");
		//			$(".tab-num-box").eq(tabIndex).css("display", "block");
		//
		//		});

		$(".video-box").mouseover(function() {
			$(this).children().find(".controls-box").css("display", "block");
		});

		$(".video-box").mouseout(function() {
			$(this).children().find(".controls-box").css("display", "none");
		});

		$(".tab-content-inner-box").on("click", ".video-stop-btn", function() {
			$(this).toggleClass("vido-star-btn");
		});

		//计算tab的高度的防止内容被覆盖
		//		var top_tab = $(".tab-list").outerHeight() + 44;
		//		$(".tab-content-box").css({
		//			"top": top_tab + "px"
		//		});
		//
		//		$(window).resize(function() {
		//			var top_tab1 = $(".tab-list").outerHeight() + 44;
		//			$(".tab-content-box").css({
		//				"top": top_tab1 + "px"
		//			});
		//		});
	</script>

</html>